<!-- <template>
	chart bar
</template>
<script setup>
	// import { useRoute } from 'vue-router';
	// let route = useRoute()
</script>
<style>
</style> -->
<template>
	<div>
		<div>
			<!-- <el-radio-group v-model="chartType" size="large" is-button>
				<el-radio-button :label="item" v-for="item in chartOptions" :key="item"/>
			</el-radio-group> -->
			<el-select v-model="chartType" class="m-2" placeholder="Select" size="large" @change="changeEchartType">
				<el-option
				v-for="item in chartOptions"
				:key="item.value"
				:label="item.label"
				:value="item.label"
				/>
			</el-select>
		</div>
		<div>
			<div ref="container" id="container"></div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, inject, nextTick } from 'vue'
	let chartOptions = [{
		label: 'bar',
		value: 1
	}, {
		label: 'line',
		value: 2
	}]
	let chartType = ref('bar')

	// 获取echart挂载的DOM节点
    let container = ref()
	console.log('container=>ref', container)

	// 定义延时器指针对象，便于组件实例销毁的时候以便清除
    // const timer = ref();
	// 获取当前组件实例,相当于this
    // let { proxy }: any = getCurrentInstance()
	// echarts初始化
    // let myChart = proxy.$echarts.init(myECharts.value)

	// 通过 inject 接收Echarts
    const Echarts = inject('$echarts');

	const initEchartsOneFn = (chartType) => {
        // echarts初始化
        const myChart = (Echarts as any).init(container.value);
 
        // 或
        // let myChart = proxy.$echarts.init(container.value);
     
        let option = {
			// 自定义echarts图标相关配置
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
				axisTick: {
					alignWithLabel: true
				}
			},
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					type: chartType,
					data: [23, 24, 18, 25, 27, 28, 25],
				},
			],
		}

		myChart.setOption(option)

		// 根据页面大小自动响应图表大小
		window.addEventListener("resize", function () {
			myChart.resize()
		})
    }

	// 判断定时器是否存在
    // if (timer.value) {
    //     clearTimeout(timer.value);
    // }
     
    // 绑定定时器，销毁的时候再次清除
    // timer.value = setTimeout(() => initEchartsOneFn(chartType.value), 1000);
	nextTick(() => initEchartsOneFn(chartType.value));

	const changeEchartType = (e) => {
		console.log(e)
		// chartType.value = e
		initEchartsOneFn(e)
	}
     
    // 组件实例销毁前清除延时器对象
    // onBeforeUnmount(() => {
    //     if (timer.value) clearTimeout(timer.value);
    // });

</script>
<style lang="scss" scoped>
#container {
	min-width: 31.25rem;
	min-height: 31.25rem;
	// max-height: 500px;
}
#myEChartsLine {
	max-height: 500px;
	// max-height: 400px;
	height: 500px;
}
</style>